<template>
  <div class="main-bar-view">
    <div class="logo">
      <img :src="logoImage" class="search-icon" @click="$router.push({ name: 'portal' })">
    </div>
    <div class="search-entry">
      <img :src="SearchIcon" class="search-icon">
      <input placeholder="输入关键词" ref="keywordRef" @keyup.enter="search" />
    </div>
    <div class="right-view">

      <a-button type="link" @click="openScoreAnalysis">成绩分析</a-button>

<!-- 成绩分析弹窗 -->
<a-modal
  title="成绩分析"
  :visible="showScoreModal"
  width="800px"
  :footer="null"
  @cancel="closeScoreAnalysis"
>
  <div class="score-analysis-container">
    <!-- 课程选择 -->
    <div class="filter-section">
      <span>选择课程：</span>
      <a-select
        v-model:value="selectedCourse"
        style="width: 200px"
        @change="handleCourseChange"
      >
        <a-select-option value="">全部课程</a-select-option>
        <a-select-option v-for="course in courseOptions" :key="course">
          {{ course }}
        </a-select-option>
      </a-select>
    </div>

    <!-- 图表容器 -->
    <a-spin :spinning="loadingScores">
      <div ref="chartRef" style="width: 100%; height: 400px"></div>
    </a-spin>
  </div>
</a-modal>
      
      <a-button type="link" @click="openHomeworkManager">作业管理</a-button>

      <a-modal title="我的作业" :visible="showHomeworkModal" width="800px" :footer="null"
        @cancel="showHomeworkModal = false">
        <a-tabs v-model:activeKey="activeHomeworkTab">
          <!-- 待完成作业 -->
          <a-tab-pane key="pending" tab="待完成">
            <a-list :data-source="pendingHomework" :loading="loadingHomework">
              <template #renderItem="{ item }">
                <a-list-item>
                  <a-list-item-meta :title="item.title" :description="item.description">
                    <!-- <template #avatar>
                      <a-avatar :src="getCourseCover(item.courseId)" shape="square" />
                    </template> -->
                  </a-list-item-meta>
                  <div class="extra-info">
                    <div>课程：{{ item.courseTitle }}</div>
                    <div>教师：{{ item.teacherName }}</div>
                    <div>截止时间：{{ formatTime(item.deadline) }}</div>
                    <div v-if="item.attachment">
                      <a class="download-link" @click="downloadAttachment(item.attachment)"> <download-outlined /> 下载附件
                      </a>
                    </div>
                  </div>
                  <template #actions>
                    <a-button type="primary" @click="showSubmitModal(item)">去完成</a-button>
                  </template>
                </a-list-item>
              </template>
            </a-list>
          </a-tab-pane>

          <!-- 待批改作业 -->
          <a-tab-pane key="reviewing" tab="待批改">
            <a-list :data-source="reviewingHomework" :loading="loadingHomework">
              <template #renderItem="{ item }">
                <a-list-item>
                  <a-list-item-meta :title="item.title" :description="item.description">
                    <template #avatar>
                      <!-- <a-avatar :src="getCourseCover(item.courseId)" shape="square" /> -->
                    </template>
                  </a-list-item-meta>
                  <div class="extra-info">
                    <div>课程：{{ item.courseTitle }}</div>
                    <div>教师：{{ item.teacherName }}</div>
                    <div>提交时间：{{ formatTime(item.publishTime) }}</div>
                    <a-tag color="orange">待教师批改</a-tag>
                  </div>
                </a-list-item>
              </template>
            </a-list>
          </a-tab-pane>

          <!-- 已批改作业 -->
          <a-tab-pane key="completed" tab="已批改">
            <a-list :data-source="completedHomework" :loading="loadingHomework">
              <template #renderItem="{ item }">
                <a-list-item>
                  <a-list-item-meta :title="item.title" :description="item.description">
                    <template #avatar>
                      <!-- <a-avatar :src="getCourseCover(item.courseId)" shape="square" /> -->
                    </template>
                  </a-list-item-meta>
                  <div class="extra-info">
                    <div>课程：{{ item.courseTitle }}</div>
                    <div>教师：{{ item.teacherName }}</div>
                    <div>批改时间：{{ formatTime(item.publishTime) }}</div>
                    <div :style="{ color: getScoreColor(item.score) }">
                      得分：{{ item.score }}分
                    </div>
                  </div>
                </a-list-item>
              </template>
            </a-list>
          </a-tab-pane>
        </a-tabs>
      </a-modal>

      <!-- 提交作业弹窗 -->
      <a-modal title="提交作业" :visible="showSubmitHomeworkModal" :footer="null" @cancel="showSubmitHomeworkModal = false">
        <a-form :model="submitForm" @finish="handleSubmitHomework">
          <a-form-item label="作业答案" name="answer">
            <a-textarea v-model:value="submitForm.answer" :rows="4" />
          </a-form-item>

          <a-form-item label="作业附件">
            <a-upload v-model:file-list="submitFiles" :before-upload="beforeUpload" :max-count="1">
              <a-button>
                <upload-outlined /> 选择文件
              </a-button>
            </a-upload>
          </a-form-item>

          <a-form-item>
            <a-button type="primary" html-type="submit" :loading="submitting">
              提交作业
            </a-button>
          </a-form-item>
        </a-form>
      </a-modal>


      <a-button type="link" @click="handleCourseClick">课程管理</a-button>
      <!-- 我的课程弹窗 -->
      <a-modal title="我的课程" :visible="showCourseModal" :footer="null" width="800px" @cancel="showCourseModal = false">
        <a-tabs v-model:activeKey="courseActiveTab">
          <a-tab-pane key="1" tab="待确认">
            <CourseList :data="filterCourses('PENDING')" :loading="loadingCourses" @refresh="getMyCourses" />
          </a-tab-pane>
          <a-tab-pane key="2" tab="进行中">
            <CourseList :data="filterCourses('PROGRESS')" :loading="loadingCourses" @refresh="getMyCourses" />
          </a-tab-pane>
          <a-tab-pane key="3" tab="已结束">
            <CourseList :data="filterCourses('COMPLETED')" :loading="loadingCourses" @refresh="getMyCourses" />
          </a-tab-pane>
          <a-tab-pane key="4" tab="已取消">
            <CourseList :data="filterCourses('CANCELED')" :loading="loadingCourses" @refresh="getMyCourses" />
          </a-tab-pane>
          <a-tab-pane key="5" tab="待评价">
            <CourseList :data="unratedCourses" :loading="loadingCourses" @refresh="getMyCourses" />
          </a-tab-pane>
        </a-tabs>
      </a-modal>

      <a-button type="link" @click="toggleChatList">消息</a-button>

      <!-- 直接内嵌ChatList弹窗 -->
      <ChatList v-if="showChatList" @close="showChatList = false" @select-user="handleSelectUser" />

      <ChatBox v-if="showChatBox" :target-user-id="selectedUserId" :target-user-name="selectedUserName"
        :show="showChatBox" @close="handleCloseChatBox" />
      <a-button type="link" @click="handleJoin()">家教入驻</a-button>
      <template v-if="userStore.user_token">
        <a-dropdown>
          <a class="ant-dropdown-link" @click="e => e.preventDefault()">
            <img :src="userStore.user_avatar
              ? BASE_URL + '/api/staticfiles/avatar/' + userStore.user_avatar
              : AvatarIcon" class="self-img">
          </a>
          <template #overlay>
            <a-menu>
              <a-menu-item>
                <a @click="goUserCenter('userInfoEditView')">个人设置</a>
              </a-menu-item>
              <a-menu-item>
                <a @click="quit()">退出</a>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
        <!--        <div class="right-icon">-->
        <!--          <img src="@/assets/cart-icon.svg">-->
        <!--          <span>3</span>-->
        <!--        </div>-->
      </template>
      <template v-else>
        <button class="login btn hidden-sm" @click="goLogin()">登录</button>
      </template>

      <div class="right-icon" @click="msgVisible = true">
        <img :src="MessageIcon">
        <span class="msg-point" style=""></span>
      </div>
      <div>
        <a-drawer title="我的消息" placement="right" :closable="true" :maskClosable="true" :visible="msgVisible"
          @close="onClose">
          <a-spin :spinning="loading" style="min-height: 200px;">
            <div class="list-content">
              <div class="notification-view">
                <div class="list">
                  <div class="notification-item flex-view" v-for="item in msgData">
                    <!---->
                    <div class="content-box">
                      <div class="header">
                        <span class="title-txt">{{ item.title }}</span>
                        <br />
                        <span class="time">{{ item.create_time }}</span>
                      </div>
                      <div class="head-text">
                      </div>
                      <div class="content">
                        <p>{{ item.content }}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a-spin>
        </a-drawer>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { listApi } from '/@/api/notice'
import { useUserStore } from "/@/store";
import logoImage from '/@/assets/images/k-logo.png';
import SearchIcon from '/@/assets/images/search-icon.svg';
import AvatarIcon from '/@/assets/images/avatar.jpg';
import MessageIcon from '/@/assets/images/message-icon.svg';
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router';
import { ref, onMounted, watch, nextTick } from 'vue';
import ChatList from './ChatList.vue';
import ChatBox from './ChatBox.vue';
import { listMyCoursesApi, listUnratedCoursesApi } from '/@/api/course'
import CourseList from '/@/components/CourseList.vue'
import { BASE_URL } from "/@/store/constants";
import { UploadOutlined } from '@ant-design/icons-vue';
import dayjs from 'dayjs';
import { getStudentHomeworkApi, submitHomeworkApi } from '/@/api/homework';
import * as echarts from 'echarts';
import request from '/@/utils/http/axios';


// 定义课程数据类型
interface Course {
  id: number;
  title: string;
  cover: string;
  teacherName: string;
  startTime: string;
  endTime: string;
  mobile: string;
  status: 'PENDING' | 'PROGRESS' | 'COMPLETED' | 'CANCELED';
  studentConfirmed: boolean;
  teacherConfirmed: boolean;
  hasEvaluation?: boolean;
}

interface Homework {
  id: number;
  courseId: number;
  courseTitle: string;
  teacherName: string;
  title: string;
  description: string;
  attachment?: string;
  publishTime: string;
  deadline: string;
  status: 0 | 1 | 2;
  score?: number;
  studentAnswer?: string;
  studentAttachment?: string;
}

// 响应式数据
const showCourseModal = ref(false);
const courseActiveTab = ref('1');
const courses = ref<Course[]>([]);
const loadingCourses = ref(false);
const unratedCourses = ref<Course[]>([]);
const showHomeworkModal = ref(false);
const activeHomeworkTab = ref('pending');
const loadingHomework = ref(false);

// 作业数据
const pendingHomework = ref<Homework[]>([]);
const reviewingHomework = ref<Homework[]>([]);
const completedHomework = ref<Homework[]>([]);

// 提交作业相关
const showSubmitHomeworkModal = ref(false);
const submitForm = ref({
  homeworkId: 0,
  answer: '',
});
const submitFiles = ref<any[]>([]);
const submitting = ref(false);

// 打开作业管理弹窗
const openHomeworkManager = () => {
  showHomeworkModal.value = true;
  loadHomeworkData();
};

// 加载作业数据
const loadHomeworkData = async () => {
  try {
    loadingHomework.value = true;
    const studentId = userStore.user_id;

    const [pendingRes, reviewingRes, completedRes] = await Promise.all([
      getStudentHomeworkApi(studentId, 0),
      getStudentHomeworkApi(studentId, 1),
      getStudentHomeworkApi(studentId, 2)
    ]);

    pendingHomework.value = pendingRes;
    reviewingHomework.value = reviewingRes;
    completedHomework.value = completedRes;
  } catch (error) {
    message.error('加载作业数据失败');
  } finally {
    loadingHomework.value = false;
  }
};

// 显示提交作业弹窗
const showSubmitModal = (homework: Homework) => {
  submitForm.value = {
    homeworkId: homework.id,
    answer: (homework as any).studentAnswer || '', // 临时类型断言
  };
  showSubmitHomeworkModal.value = true;
};

const downloadAttachment = async (filename: string) => {
  try {
    const response = await fetch(getFileUrl(filename));
    const blob = await response.blob();
    const url = window.URL.createObjectURL(blob);

    const link = document.createElement('a');
    link.href = url;
    link.download = filename.split('_').slice(1).join('_'); // 移除时间戳，保留原始文件名
    document.body.appendChild(link);
    link.click();

    // 清理
    document.body.removeChild(link);
    window.URL.revokeObjectURL(url);
  } catch (error) {
    message.error('下载失败: ');
  }
};

// 提交作业处理
const handleSubmitHomework = async () => {
  try {
    submitting.value = true;
    await submitHomeworkApi({
      homeworkId: submitForm.value.homeworkId,
      answer: submitForm.value.answer,
      file: submitFiles.value[0]?.originFileObj 
    });
    message.success('作业提交成功');
    showSubmitHomeworkModal.value = false;
    loadHomeworkData(); // 刷新列表
  } catch (error) {
    message.error('提交失败');
  } finally {
    submitting.value = false;
  }
};

// 文件上传处理
const beforeUpload = (file: File) => {
  const isLt10M = file.size / 1024 / 1024 < 10;
  if (!isLt10M) {
    message.error('文件大小不能超过10MB');
    return false;
  }
  submitFiles.value = [file];
  return false;
};

// 工具方法
const formatTime = (time: string) => dayjs(time).format('YYYY-MM-DD HH:mm');
const getFileUrl = (filename: string) => `${BASE_URL}/api/staticfiles/attachment/${filename}`;
const getCourseCover = (courseId: number) => `${BASE_URL}/course/cover/${courseId}`;
const getScoreColor = (score?: number) => {
  if (!score) return '#333';
  if (score < 60) return '#ff4d4f';
  if (score < 90) return '#1890ff';
  return '#52c41a';
};

// 暴露打开方法给父组件
defineExpose({ openHomeworkManager });

// 获取课程数据
const getMyCourses = async () => {
  try {
    loadingCourses.value = true;
    // 获取所有课程
    const allCourses = await listMyCoursesApi(userStore.user_id);
    courses.value = allCourses.map(item => ({
      ...item,
      cover: BASE_URL + '/api/staticfiles/image/' + item.cover,
    }));

    // 单独获取未评价课程
    const unrated = await listUnratedCoursesApi(userStore.user_id);
    unratedCourses.value = unrated.map(item => ({
      ...item,
      cover: BASE_URL + '/api/staticfiles/image/' + item.cover,
    }));
  } catch (error) {
    message.error('获取课程失败');
  } finally {
    loadingCourses.value = false;
  }
};

// 过滤课程状态
const filterCourses = (status: Course['status']) => {
  return courses.value.filter((item) => item.status === status);
};

// 点击"我的课程"时触发
const handleCourseClick = () => {
  showCourseModal.value = true;
  getMyCourses();
};

const router = useRouter();
const route = useRoute();
const userStore = useUserStore();
const showChatList = ref(false);
const showChatBox = ref(false);
const selectedUserId = ref('');

const keywordRef = ref()

let loading = ref(false)
let msgVisible = ref(false)
let msgData = ref([] as any)

const selectedUserName = ref('');



onMounted(() => {
  getMessageList();
  // console.log("头像是",userStore.user_avatar);

})

const getMessageList = () => {
  loading.value = true
  listApi({}).then(res => {
    msgData.value = res.data
    loading.value = false
  }).catch(err => {
    console.log(err)
    loading.value = false
  })
}

const toggleChatList = () => {
  showChatList.value = !showChatList.value;
};

const handleSelectUser = (user: { id: string, name: string }) => {
  selectedUserId.value = user.id;
  selectedUserName.value = user.name;
  // showChatBox.value = true;
  showChatList.value = false;  // 关闭聊天列表
  showChatBox.value = true;    // 打开聊天窗口

};

const handleCloseChatBox = () => {
  showChatBox.value = false;
  showChatList.value = true; // 关闭时重新显示聊天列表
};

const search = () => {
  const keyword = keywordRef.value.value
  if (route.name === 'search') {
    router.push({ name: 'search', query: { keyword: keyword } })
  } else {
    let text = router.resolve({ name: 'search', query: { keyword: keyword } })
    window.open(text.href, '_blank')
  }
}
const goLogin = () => {
  router.push({ name: 'login' })
}

const goUserCenter = (menuName) => {
  router.push({ name: menuName })
}
const quit = () => {
  userStore.logout().then(res => {
    router.push({ name: 'portal' })
  })
}
const onClose = () => {
  msgVisible.value = false;
}
const handleJoin = () => {
  let userId = userStore.user_id;
  if (userId) {
    router.push({ name: 'jiajiaoEditView' })
  } else {
    message.warn("请先登录！");
  }
}

// 弹窗控制
const showScoreModal = ref(false);
// 图表DOM引用
const chartRef = ref<HTMLElement>();
// ECharts实例
let chartInstance: echarts.ECharts | null = null;
// 课程筛选选项
const courseOptions = ref<string[]>([]);
// 选中的课程
const selectedCourse = ref('');
// 成绩数据
const scoreData = ref<Homework[]>([]);
// 加载状态
const loadingScores = ref(false);

// 打开成绩分析
const openScoreAnalysis = async () => {
  showScoreModal.value = true;
  try {
    // 获取课程列表
    const res = await fetchCourses();
    courseOptions.value = res;
    
    // 默认选中第一个课程
    if (res.length > 0) {
      selectedCourse.value = res[0];
    }
    
    // 获取初始数据
    await loadScoreData();
    initChart();
  } catch (error) {
    message.error('获取数据失败');
  }
};

// 关闭弹窗
const closeScoreAnalysis = () => {
  showScoreModal.value = false;
  // 销毁图表实例
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
};

// 获取课程列表
const fetchCourses = async () => {
  const response = await request({
    method: 'get',
    url: '/api/hwork/courses',
    params: { studentId: userStore.user_id }
  });
  return response.data;
};

// 加载成绩数据
const loadScoreData = async () => {
  loadingScores.value = true;
  try {
    const response = await request({
      method: 'get',
      url: '/api/hwork/scores',
      params: {
        studentId: userStore.user_id,
        courseTitle: selectedCourse.value || undefined
      }
    });
    scoreData.value = response.data;
  } finally {
    loadingScores.value = false;
  }
};

// 课程筛选变化
const handleCourseChange = () => {
  loadScoreData().then(updateChart);
};

// 初始化图表
const initChart = () => {
  nextTick(() => {
    if (chartRef.value) {
      chartInstance = echarts.init(chartRef.value);
      updateChart();
    }
  });
};

// 更新图表数据
const updateChart = () => {
  if (!chartInstance) return;

  const sortedData = [...scoreData.value].sort((a, b) => 
    dayjs(a.publishTime).unix() - dayjs(b.publishTime).unix()
  );

  const option: echarts.EChartsOption = {
    title: {
      text: '成绩趋势分析',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: sortedData.map(item =>  // 使用排序后的数据
        dayjs(item.publishTime).format('MM-DD')
      ),
      name: '时间',
      inverse: false // 确保未设置反向
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 100,
      name: '分数'
    },
    series: [{
      data: sortedData.map(item => item.score),
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 8,
      itemStyle: {
        color: '#1890ff'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(24, 144, 255, 0.6)' },
          { offset: 1, color: 'rgba(24, 144, 255, 0.01)' }
        ])
      }
    }],
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    }
  };

  chartInstance.setOption(option);
};

// 响应窗口大小变化
window.addEventListener('resize', () => {
  chartInstance?.resize();
});
</script>

<style scoped lang="less">
.main-bar-view {
  position: fixed;
  top: 0;
  left: 0;
  height: 56px;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #cedce4;
  padding-left: 48px;
  z-index: 16;
  display: flex;
  flex-direction: row;
  //justify-content: center; /*水平居中*/
  align-items: center;
  /*垂直居中*/
}

.logo {
  margin-right: 24px;

  img {
    width: 32px;
    height: 32px;
    cursor: pointer;
  }
}

.search-entry {
  position: relative;
  width: 400px;
  min-width: 200px;
  height: 32px;
  background: #ecf3fc;
  padding: 0 12px;
  border-radius: 16px;
  font-size: 0;
  cursor: pointer;

  img {
    max-width: 100%;
    height: auto;
  }

  .search-icon {
    width: 18px;
    margin: 7px 8px 0 0;
  }

  input {
    position: absolute;
    top: 4px;
    width: 85%;
    height: 24px;
    border: 0px;
    outline: none;
    color: #000;
    background: #ecf3fc;
    font-size: 14px;
  }
}

.right-view {
  padding-right: 36px;
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: flex-end;
  /* 内容右对齐 */

  .username {
    height: 32px;
    line-height: 32px;
    text-align: center;
  }

  button {
    outline: none;
    border: none;
    cursor: pointer;
  }

  img {
    cursor: pointer;
  }

  .right-icon {
    position: relative;
    width: 24px;
    margin: 4px 0 0 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 0;

    span {
      position: absolute;
      right: -15px;
      top: -3px;
      font-size: 12px;
      color: #fff;
      background: #4684e2;
      border-radius: 8px;
      padding: 0 4px;
      height: 16px;
      line-height: 16px;
      font-weight: 600;
      min-width: 20px;
      text-align: center;
    }

    .msg-point {
      position: absolute;
      right: -4px;
      top: 0;
      min-width: 8px;
      width: 8px;
      height: 8px;
      background: #4684e2;
      border-radius: 50%;
    }
  }

  .self-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    vertical-align: middle;
    cursor: pointer;
  }

  .btn {
    background: #4684e2;
    font-size: 14px;
    color: #fff;
    border-radius: 32px;
    text-align: center;
    width: 66px;
    height: 32px;
    line-height: 32px;
    vertical-align: middle;
    margin-left: 32px;
  }
}

.content-list {
  flex: 1;

  .list-title {
    color: #152844;
    font-weight: 600;
    font-size: 18px;
    //line-height: 24px;
    height: 48px;
    margin-bottom: 4px;
    border-bottom: 1px solid #cedce4;
  }
}

.notification-item {
  padding-top: 16px;

  .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 8px;
  }

  .content-box {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border-bottom: 1px dashed #e9e9e9;
    padding: 4px 0 16px;
  }

  .header {
    margin-bottom: 12px;
  }

  .title-txt {
    color: #315c9e;
    font-weight: 500;
    font-size: 14px;
  }

  .time {
    color: #a1adc5;
    font-size: 14px;
  }

  .head-text {
    color: #152844;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;

    .name {
      margin-right: 8px;
    }
  }

  .content {
    margin-top: 4px;
    color: #484848;
    font-size: 14px;
    line-height: 22px;
  }

}

.extra-info {
  min-width: 200px;
  text-align: right;
  color: #666;
  font-size: 16px;
}

.ant-list-item {
  padding: 20px;
  margin: 12px 0;
  background: #f8faff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

// 信息布局优化
.extra-info {
  min-width: 220px;
  padding-left: 20px;
  border-left: 1px solid #e8e8e8;

  div {
    margin: 6px 0;
    color: #666;

    &:first-child {
      color: #1890ff;
      font-weight: 500;
    }
  }
}

.ant-btn-primary {
  background: linear-gradient(135deg, #1890ff, #0066ff);
  border: none;
  border-radius: 20px;
  padding: 0 24px;
  height: 36px;
}

.title-wrapper {
  display: flex;
  align-items: center;
}

.extra-info {
  div:nth-child(3) {
    color: #ff4d4f;
    font-weight: 500;

    &::before {
      content: '⏰ ';
      margin-right: 4px;
    }
  }
}

.download-link {
  color: #1890ff;

  &:hover {
    color: #0066ff;
    text-decoration: underline;
  }
}

.score-analysis-container {
  padding: 16px;
}

.filter-section {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
</style>
